<template>
  <a-dropdown v-model:visible="visible" placement="bottomRight" :trigger="['click']">
    <a-button :size="size">
      <template #icon>
        <Icon type="icon-lieshezhi" class="!text-color-secondary" />
      </template>
    </a-button>
    <template #overlay>
      <div class="bg-white shadow-md rounded">
        <div class="px-3 py-2 text-color-secondary border-0 border-b border-gray-200 border-solid">
          {{ t("components.columnFilter.plzChooseShow") }}
        </div>
        <div class="p-3 pb-0">
          <div class="mb-3">
            <a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="checkAllChange">
              <span class="text-sl-color-2">{{ t("common.all") }}</span>
            </a-checkbox>
          </div>
          <a-checkbox-group v-model:value="checkedKeys">
            <div v-for="el in allColumns" :key="el.key" class="mb-3">
              <a-checkbox :value="el.key" :disabled="requiredKeys.indexOf(el.key as string) !== -1">
                <span class="text-sl-color-2">{{ el.title }}</span>
              </a-checkbox>
            </div>
          </a-checkbox-group>
        </div>
      </div>
    </template>
  </a-dropdown>
</template>
<script lang="ts" setup>
import { computed, defineComponent, ref, watch } from "vue";
import { Dropdown, TableColumnType, Button, Checkbox, ButtonProps } from "ant-design-vue";
import { useI18n } from "/@/locales/useI18n";
import Icon from "/@/components/Icon.vue";
import { buildShortUUID } from "../utils/uuid";

const props = defineProps<{
  columns: TableColumnType[];
  requiredKeys: string[];
  defaultCheckedKeys?: string[];
  size: ButtonProps["size"];
}>();

const emits = defineEmits(["update:columns"]);

const { t } = useI18n();
const visible = ref(false);
const allColumns = [...props.columns] as TableColumnType[];
allColumns.forEach((el) => {
  if (!el.key) {
    if (typeof el.dataIndex == "string") {
      el.key = el.dataIndex;
    } else {
      el.key = buildShortUUID();
    }
  }
});
let defaultCheckedKeys = props.defaultCheckedKeys as string[];
if (!defaultCheckedKeys) {
  defaultCheckedKeys = allColumns.map((item) => item.key as string);
}
function getColumnsByKeys(keys: string[]) {
  const result: TableColumnType[] = [];
  for (let i = 0, ii = allColumns.length; i < ii; i++) {
    const item = allColumns[i];
    if (keys.indexOf(item.key as string) !== -1) {
      result.push(item);
    }
  }
  return result;
}
const checkedKeys = ref<string[]>(defaultCheckedKeys);
emits("update:columns", getColumnsByKeys(defaultCheckedKeys));

const checkAll = ref(true);
watch(checkedKeys, (v) => {
  checkAll.value = v.length === allColumns.length;
  emits("update:columns", getColumnsByKeys(v));
});

function checkAllChange() {
  if (checkAll.value) {
    checkedKeys.value = allColumns.map((item) => item.key as string);
  } else {
    checkedKeys.value = props.requiredKeys as string[];
  }
}

const indeterminate = computed(() => {
  return checkedKeys.value.length > 0 && checkedKeys.value.length < allColumns.length;
});
</script>
